<template>
	<view>
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="账号" required>
					<uni-easyinput v-model="baseFormData.account" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="密码" required>
					<uni-easyinput v-model="baseFormData.password" type="password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button type="primary" @click="submit">登录</button>
			</view>
		</view>
	</view>
</template>
<!-- Vue3 写法 -->
<script setup>
	// 	import {onMounted} from 'vue'
	// 	import {useRoute} from 'vue-router'
	// 	import {
	// 		ref
	// 	} from 'vue'

	// import { utilDecodeURIComponentParams } from '../../utils/handle_page_navigate_params';
	// 	const Router = useRoute()
	// 	const baseFormData = ref({
	// 		account: '',
	// 		password: ''
	// 	})

	// 	const submit = () => {
	// 		console.log(baseFormData.value)
	// 	}

	// 	onMounted(()=>{
	// 	    vue3中 我们需要借助useRouter来获取 但是跳转只能通过navigateTo !!
	// 		console.log('Router.query',Router.query)
	// 	})
	// 
</script>

<!-- Vue2 写法 -->
<script>
	import {
		utilDecodeURIComponentParams
	} from '../../utils/handle_page_navigate_params';
	// api
	import {
		testApi
	} from '@/api/test.js';
	export default {
		data() {
			return {
				baseFormData: {
					account: '',
					password: ''
				}
			}
		},
		methods: {
			async submit() {
				await testApi(this.baseFormData)
			}
		},
		onLoad(options) {
			console.log('vue2的方式options', utilDecodeURIComponentParams(options.params))
		}
	}
</script>
<style lang="less">
	.example {
		padding: 24px;
	}
</style>